<template>
  <view class="my-content">
    <view class="my-header">
      <view class="my-title">我的</view>

      <view class="my-info">
        <up-image :show-loading="true" shape="circle" :src="src" width="160rpx" height="160rpx"
          @click="click"></up-image>
        <view class="my-info-text">{{ name }}</view>
        <up-tag :text="isCertifiedText" plain :borderColor="isTagBr" :color="isTagBr"> </up-tag>
      </view>
    </view>

    <view class="operate-card">

      <up-cell-group>
        <up-cell title="个人信息" :clickable="false" isLink rightIcon="" url="pages/userInfo/index">
          <template #icon>
            <up-icon class="cell-icon" :size="24" name="setting-fill"></up-icon>
          </template>
        </up-cell>
        <up-cell title="人脸信息" :clickable="false" isLink rightIcon="" url="pages/faceInfo/index">
          <template #icon>
            <up-icon class="cell-icon" :size="24" name="man-add-fill"></up-icon>
          </template>
        </up-cell>
        <up-cell title="我的贴子" :clickable="false" isLink rightIcon="" url="pages/myPosts/index">
          <template #icon>
            <up-icon class="cell-icon" :size="24" name="file-text-fill"></up-icon>
          </template>
        </up-cell>
        <up-cell :border="false" title="审批中心" :clickable="false" isLink rightIcon="" url="pages/approvalCenter/index">
          <template #icon>
            <up-icon class="cell-icon" :size="24" name="server-man"></up-icon>
          </template>

          <template #value>
            <up-badge bgColor="#ec8a1d" max="99" :value="value"></up-badge>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
  </view>
</template>

<script>
import { getUserInfo } from '@/api/userinfo.js'
import { getCheckList } from '@/api/approvalCenter.js'
export default {
  data() {
    return {
      src: '',
      name: '鸭头啤酒',
      certified: 0,
      value: 0, // 待审批的申请数量
    }
  },
  computed: {
    isCertifiedText() {
      return this.certified === 1 ? '已认证' : '未认证'
    },
    isTagBr() {
      return this.certified === 1 ? '#00C8A5' : "rgba(255,255,255,.8)"
    }
  },
  created() {
    this.getUserInfos();
    this.getCheckList();
  },
  methods: {
    // 获取个人信息数据
    async getUserInfos() {
      try {
        const res = await getUserInfo();
        if (res.code === 2000) {
          this.src = res.data.avatar;
          this.name = res.data.nickname;
        } else {
          throw res.msg;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取 审批中心待审批的列表数据
    async getCheckList() {
      try {
        const res = await getCheckList({
          page: 1,
          limit: 1
        });
        if (res.code === 2000) {
          this.value = res.total;
        } else {
          throw res.msg;
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-content {
  width: 100%;
  height: 100vh;
  background: #f2f2f2;
}

.my-header {
  width: 100%;
  height: 450rpx;
  background: #c30d23;
  padding-top: 50rpx;
  box-sizing: border-box;
}

.my-title {
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 35rpx;
  font-weight: 400;
}

.my-info {
  width: 100%;
  // height: 120rpx;
  margin-top: 100rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .my-info-text {
    max-width: calc(100% - 160rpx);
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
    white-space: nowrap;
    /* 强制文本在一行内显示 */
    overflow: hidden;
    /* 隐藏超出容器的文本 */
    text-overflow: ellipsis;
    /* 使用省略号表示被隐藏的文本 */
    margin: 0 30rpx;
  }

  :deep(.u-tag) {
    height: 26rpx;
    line-height: 22px;
    padding: 0 5px;
  }

  :deep(.u-tag__text--medium) {
    font-size: 13rpx;
    line-height: 13rpx;
  }
}

.operate-card {
  width: calc(100% - 60rpx);
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 20rpx;
  margin-top: -60rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

:deep(.u-cell__left-icon-wrap) {
  margin-right: 20rpx !important;
}
</style>